<!--结单分为四个状态，已结算、付款中、已结单、查看-->
<!--根据不同的状态’字段是否可以编辑-->
<template>
  <el-dialog
    title="结单"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="600px"
    append-to-body
    class="borderb_dia"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="会员ID：" prop="id">
        {{ userId }}
      </el-form-item>
      <el-form-item label="结算原因：" prop="type_name">
        {{form.type_name}}
      </el-form-item>
      <el-form-item label="当前状态：" prop="reason">
        {{ status_name || '-' }}
      </el-form-item>
      <el-form-item label="结算单：" prop="check_url">
        <el-button type="primary">下载</el-button>
      </el-form-item>

      <el-form-item label="金额：" prop="coin">
        {{form.coin}}
      </el-form-item>
      <el-form-item label="结算银行卡：" prop="bankcard">
       {{form.bankcard}}
      </el-form-item>
      <el-form-item label="结算邮箱：" prop="email">
       {{form.email}}
      </el-form-item>
      <el-form-item label="结算账户名：" prop="username">
       {{form.username}}
      </el-form-item>
      <el-form-item label="订单ID:" prop="order_id">
       {{form.order_id}}
      </el-form-item>
      <el-form-item label="发票状态：" prop="invoice_status">
       {{form.invoice_status}}
      </el-form-item>

      <el-form-item label="发票邮寄单号:" prop="track_number" v-if="form.invoice_status==1">
        {{form.track_number}}
      </el-form-item>
      <el-form-item label="备注:" prop="msg">
        {{form.msg}}
      </el-form-item>
    </el-form>
    <div slot="footer" class="footer-btn">
      <el-button @click="handleCloseDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { validPhone, validPassword } from '@/utils/validate'
import { reqPayCheck, reqPayDataById, reqTrafficPayStatus, reqTrafficPayType } from '@/api/trafficMasterMgt'
import { userInfo } from '@/api/advmaster'

export default {
  data() {
    return {
      userList: [],
      invoiceList: [
        { id: 0, name: '未发送' },
        { id: 1, name: '已发送' }
      ],
      statusList: [
        { id: 1, name: '审核通过' },
        { id: 2, name: '审核不通过' }
      ],
      status_name: '',//当前状态
      status: null,//当前状态匹配
      userId: null,
      form: {
        id: this.rowitem.jd_id,
        username: '',//用户名
        bankcard: '',//银行卡信息
        email: '',
        coin: '',//金额
        status_name: '', //结单状态
        track_number: null,//发票单号
        order_id: null,
        invoice_status: '',//发票状态
        check_url: '',//结算单链接
        msg: '',//备注
        type_name: null

      },
      // 表单校验
      rules: {
      },
      trafficPayTypeList: [],//结算列表
      trafficPayStatusList: []//结算状态

    }
  },
  props: {
    rowitem: {
      default: null
    }
  },
  created() {
    this.userId = this.rowitem.id
    this.getPayDataById()
    this.getTrafficPayType()
    this.getInfo()
  },
  watch: {
    'form.check_url'(val) {
      console.log('结算单', val)
    }
  },
  methods: {
    // 获取info信息
    getInfo() {
      userInfo({ id: this.rowitem.custom_id }).then(res => {
        let user = res.data
        this.form.bankcard = user.invoice.bank_crad
        this.form.username = user.invoice.username
        this.form.email = user.email
      }).catch(() => {
        this.all_loading = false
      })
    },
    getTrafficPayStatus() {
      this.trafficPayStatusList = []
      reqTrafficPayStatus().then(res => {
        let data = res.data
        for (let key in data) {
          console.log('status', this.status)
          if (this.status == 1) {
            if (key != 0 && key != 8 && key != 1) {
              console.log('222')
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }
          if (this.status == 2) {
            if (key != 0 && key != 8 && key != 1 && key != 2) {
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }
          if (this.status == 4) {
            if (key != 0 && key != 8 && key != 1 && key != 2 && key != 4) {
              let obj = {
                value: key,
                label: data[key]
              }
              this.trafficPayStatusList.push(obj)
            }
          }

        }
        console.log('结算状态', this.trafficPayStatusList)
      })
    },
    getTrafficPayType() {
      this.trafficPayTypeList = []
      reqTrafficPayType().then(res => {
        console.log('结算原因', res.data)
        let data = res.data
        for (let key in data) {
          let obj = {
            value: key,
            label: data[key]
          }
          this.trafficPayTypeList.push(obj)
        }

      })
    },
    getPayDataById() {
      reqPayDataById(this.rowitem.jd_id).then(res => {
        console.log('结单信息', res.data)
        this.form.coin = res.data.coin
        this.form.type_name = res.data.type_name
        this.status_name = res.data.status_name
        this.status = res.data.status
        this.form.order_id = res.data.order_id
        this.form.invoice_status = res.data.invoice_status
        this.form.track_number = res.data.track_number
        this.form.msg = res.data.msg
        this.getTrafficPayStatus()//结算状态列表
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 10px;
}
.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
</style>
